<template>
    <div class="waimai">
        <div class="wm-top">
            <div class="top-l">
                <router-link to="/" tag="span" class="iconfont icon-jiantou">
                    <!-- <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiantou"></use>
            </svg> -->
                </router-link>
                <div>外卖</div>
            </div>
            <div class="top-r">
                <div>地址{{ aa }}</div>
                <span>></span>
                <span> 消息 </span>
            </div>
        </div>

        <div class="wm-con">
            <div class="con-inp">
                <div class="inp-op">搜索</div>
                <input type="text" placeholder="好特卖HotMaxx" />
            </div>

            <div class="con-s">
                <div>草莓花束</div>
                <div>ccoo奶茶</div>
                <div>绿豆冰沙</div>
                <div>龙虾</div>
            </div>

            <div class="icon-list">
                <div class="banner">
                    <div class="swiper-container mySwiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div
                                    class="item"
                                    v-for="i in listicon"
                                    :key="i.id">
                                    <span>
                                        <svg class="icon" aria-hidden="true">
                                            <use
                                                :xlink:href="`#${i.icon}`"></use>
                                        </svg>
                                    </span>
                                    <div class="title">
                                        {{ i.text }}
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div
                                    class="item"
                                    v-for="i in listicon"
                                    :key="i.id">
                                    <span>
                                        <svg class="icon" aria-hidden="true">
                                            <use
                                                :xlink:href="`#${i.icon}`"></use>
                                        </svg>
                                    </span>
                                    <div class="title">
                                        {{ i.text }}
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div
                                    class="item"
                                    v-for="i in listicon"
                                    :key="i.id">
                                    <span>
                                        <svg class="icon" aria-hidden="true">
                                            <use
                                                :xlink:href="`#${i.icon}`"></use>
                                        </svg>
                                    </span>
                                    <div class="title">
                                        {{ i.text }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="con-list">
                <router-link
                    :to="`/sell/${item.id}`"
                    class="item"
                    tag="div"
                    v-for="item in list"
                    :key="item.id">
                    <div class="item-l">
                        <img :src="item.pic_url" alt="" />
                    </div>
                    <div class="item-c">
                        <div class="title">
                            <h3>{{ item.name }}</h3>
                        </div>
                        <div class="score">{{ item.wm_poi_score }}分</div>
                        <div class="text">
                            <div class="text-l">
                                <span>{{ item.min_price_tip }}</span
                                >&nbsp;
                                <span>{{ item.shipping_fee_tip }}</span>
                            </div>
                            <div class="text-r">
                                <span>{{ item.delivery_time_tip }}</span
                                >&nbsp;
                                <span>{{ item.distance }}</span>
                            </div>
                        </div>
                        <div class="timer">
                            营业时间{{ item.shipping_time }}
                        </div>
                    </div>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
import Swiper from "swiper";

import "swiper/css/swiper.css";

import { getAllPro } from "@/api/request";
import "@/assets/iconfont/iconfont.js";
import "@/assets/iconfont/iconfont.css";

export default {
    data() {
        return {
            aa: 123,
            list: {},
            listicon: [],
        };
    },
    created() {
        getAllPro("/sell").then((res) => {
            let { data } = res.data;
            this.list = data;
        }),
            this.getIcon();
    },
    mounted() {
        var swiper = new Swiper(".mySwiper", {
            pagination: {
                el: ".swiper-pagination",
            },
        });
    },
    methods: {
        async getIcon() {
            let res = await getAllPro("/iconList");
            let { list } = res.data;
            this.listicon = list;
        },
    },
};
</script>

<style lang="scss" scoped>
.waimai {
    overflow: hidden;
    background-image: linear-gradient(
        to right,
        rgb(251, 244, 93),
        rgb(250, 209, 91),
        rgb(247, 194, 90)
    );

    .wm-top {
        margin: 0.2rem 0.2rem;
        height: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .top-l {
            height: 1rem;
            font-size: 0.4rem;
            padding-left: 0.1rem;
            font-weight: 800;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            color: #000;
            vertical-align: middle;
            span {
                // width: .6rem;
                // height: .4rem;
                margin-right: 0.1rem;
                // color: #858687;
                vertical-align: middle;
            }
        }
        .top-r {
            display: flex;
            padding-right: 0.1rem;
        }
    }
    .wm-con {
        // background-color: rgb(246, 246, 246);
        background-color: #fff;
        border-radius: 0.5rem 0.5rem 0 0;
        overflow: hidden;
        .con-inp {
            margin: 0.2rem;
            // margin-left: .5rem;
            height: 0.66rem;
            display: flex;
            border: 0.01rem solid #f3d980;
            border-radius: 0.3rem;
            position: relative;
            box-sizing: border-box;
            background-image: linear-gradient(to right, #fff, #fffdf8);
            input {
                border: none;
                width: 100%;
                margin-left: 0.5rem;
                // background-color: #f9fefd;
                &:focus {
                    outline: none;
                }
            }

            .inp-op {
                width: 1.12rem;
                background-color: #bfa;
                border-radius: 0.5rem;
                position: absolute;
                top: 0;
                right: 0;
                height: 0.66rem;
                line-height: 0.66rem;
                text-align: center;
                background-color: #f7cd4c;
            }
        }

        .con-s {
            padding: 0.2rem;
            display: flex;
            margin: 0.2rem 0;
            & > div {
                // width: 1.22rem;
                margin-right: 0.1rem;
                padding: 0.1rem 0.15rem;
                height: 0.4rem;
                background-color: #f1f1f1;
                border-radius: 0.3rem;
            }
        }
        .icon-list {
            .banner {
                height: 4.6rem;
                overflow: hidden;
                .mySwiper {
                    height: 4.6rem;

                    .swiper-slide {
                        // width: 100%;
                        // background-color: #bfa;
                        display: flex;
                        flex-flow: row wrap;
                        align-items: center;
                        .item {
                            width: 20%;
                            height: 1.5rem;
                            text-align: center;
                            // background-color: #858687;
                            .icon {
                                width: 0.5rem;
                                height: 0.5rem;
                                margin-bottom: 0.1rem;
                            }

                            // span
                        }
                    }
                }
            }
        }

        .con-list {
            background-color: #f6f6f6;
            padding: 0.2rem;
            margin-top: 0.2rem;
            // height: 3rem;
            .item {
                height: 2.52rem;
                background-color: #fff;
                padding: 0.2rem;
                margin-bottom: 0.2rem;
                display: flex;
                border-radius: 0.2rem;
                .item-l {
                    // background-color: #bfa;
                    width: 2.08rem;

                    img {
                        object-fit: fill;
                        width: 2.08rem;
                        height: 2.52rem;
                    }
                }

                .item-c {
                    margin-left: 0.15rem;
                    // width: 100%;
                    // background-color: red;
                    // overflow: hidden;
                    flex: 1;
                    .title {
                        h3 {
                            width: 5rem;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            font-size: 0.4rem;
                        }
                    }

                    .score {
                        margin-top: 0.1rem;
                        color: #ff8000;
                    }

                    .text {
                        margin-top: 0.1rem;
                        display: flex;
                        color: #858687;
                        font-size: 0.25rem;
                        justify-content: space-between;
                    }

                    .timer {
                        margin-top: 0.2rem;
                        color: #ff8000;
                        font-size: 0.35rem;
                    }
                }
            }
        }
    }
}
</style>
